<!--
- Author:  LiShibin.
- Date:    2017/8/10 0010.
- File:    article.
-->
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style>
    .spinner {
      /*margin: 100px auto 0;*/
      width: 150px;
      text-align: center;
    }

    .spinner > div {
      width: 30px;
      height: 30px;
      background-color: #67CF22;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% {
        -webkit-transform: scale(0.0)
      }
      40% {
        -webkit-transform: scale(1.0)
      }
    }

    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      }
      40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
  </style>
</head>
<body>
  <div id="loader" style="display: none; position: absolute; width: 150px;height: 100px; text-align: center; top: 50%; left: 50%; margin-left: -75px; margin-top: -50px">
    <div class="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
    <p style="font-size:16px; color:#aaa; text-align: center">文章正在加载中...</p>
  </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/2.5.1/vconsole.min.js"></script>-->
<script>
  var ApiUrl = 'http://shop.fjjpny.com/mobile'

  var id = getQueryString('id')
  var memberId = getQueryString('memberId')
  var loading=setTimeout(function () {
    $('#loader').show()
  },1000)
    $.ajax({
      type: 'post',
      url: ApiUrl + '/index.php?act=article_detail&op=article_detail',
      dataType: 'json',
      data: {id: id},
      cache: false,
      success: function (article) {
        console.log('获取文章成功', article)
        $.ajax({ // 获取邀请人信息
          type: 'post',
          url: ApiUrl + '/index.php?act=article_detail&op=memberInfo',
          dataType: 'json',
          data: {id: memberId},
          cache: false,
          success: function (memberInfo) {
            window.clearTimeout(loading)
            console.log('获取邀请人信息成功', memberInfo)
            if (!memberInfo.data.member_avatar || memberInfo.data.member_avatar == '') {
              memberInfo.data.member_avatar = 'static/images/avatar.png'
            }
            var inviter = '<div id="bgimg" style="background: url(' + 'static/images/erweim.png' + ') no-repeat; background-size: cover;  width:100%; height:600px;text-align: center"><div style="width:100%;margin: 0 auto;margin-bottom: 54px;overflow: hidden;"><div class="padding:15px; color:#fff;text-align: center; margin-top:20px;"><div style="width:60px; height:60px; border-radius:50%;overflow:hidden; margin:20px auto 5px;"><img style="width:100%;" src="' + memberInfo.data.member_avatar + '"></div> <div style=" font-size:18px; color: #fff; width:100%;margin-top:10px;display:inline-block; vertical-align:middle;"><p>' + memberInfo.data.member_name + '</p> <p>为您推荐金品种子商城</p></div></div> <div style="text-align:center; font-size:24px;color:#fff;margin-top: 20px;"><img style="width:120px; height:120px; margin:0 auto; border:8px #fff solid;border-radius:10px;" src="' + memberInfo.data.qrcode_image + '"> <p style="font-size:18px; color:#000;">长按二维码点击识别二维码</p></div></div></div>'
            var backNave = '<div style="position: fixed;bottom: 0;width: 100%;"><a href="' + './news/list' + '" style="display:block;text-align:center; height: 45px;line-height: 45px;font-size: 15px;background: #45a73a;border: 0;width:100%;color: #fff;">返回</a></div>'
            document.getElementsByTagName('html')[0].innerHTML = article.data.html
            var html = inviter
            var key = localStorage.getItem('key')
            if (key && key != '') { // 如果存在key， 说明是登录过的用户，添加返回按钮，返回商城
              html = inviter + backNave
            }
            $(document.body).append(html)
          }
        })
      }
    })
  function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) {
      return unescape(r[2])
    }
    return null
  }</script>
</html>